﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CannotClickMe!</title>
<style type="text/css">
*
{
	padding: 0;
	margin: 0;
}
body
{
	font-family:Verdana;
	margin: 10px;
}
#div1
{
	overflow: hidden;
	position: relative;
	border: 2px solid #000;
	width: 380px;
	height: 380px;
	background: White url("images/background.png") center center no-repeat;
}
#divInner
{
	position: absolute;
	padding: 20px;
}
#aClick
{
	padding: 0;
	display: block;
}
#imgCatching
{
	padding: 0 10px;
	font-size: 10px;
}
#divSay
{
	height: 10px;
	font-size: 9px;
	font-weight: bold;
	color: Red;
	text-align: center;
}
#divInfo
{
	position: absolute;
	font-size: 11px;
}
</style>
<script type="text/javascript">
//<![CDATA[

// Global variables
var isCapturing;
var div1;
var divInner;
var imgCatching;

function mousePoint(x, y){
	this.x = x;
	this.y = y;
}

// Create a  mouse point
function mousePosition(evnt){
	evnt = evnt || window.event; // 兼容 IE 和 FF
	var x = parseInt(evnt.clientX);
	var y = parseInt(evnt.clientY);
	return new mousePoint(x, y);
}

function init(){
	div1 = document.getElementById("div1");
	divInner = document.getElementById("divInner");
	imgCatching = document.getElementById("imgCatching");
	divInner.onmouseover = goAway;
	
	debugInfo(0);
}

function getImageName(){
	var randomDigit = Math.floor(3 * Math.random()) + 1;
	return "images/" + randomDigit + ".PNG";
}

function setImage(){
	var imageName = getImageName();
	imgCatching.src = imageName;
}

function goAway(evnt) {
	var divInfo = document.getElementById("divInfo");
	var mousePos = mousePosition(evnt);
	//divInfo.innerHTML = "x: " + mousePos.x + " y: " + mousePos.y;
	
	var random = (div1.offsetHeight) / 2 * Math.random();
	var newTop = (random + divInner.offsetTop + divInner.offsetHeight) % div1.offsetHeight;
	random = (div1.offsetWidth) / 2  * Math.random();
	var newLeft = (random + divInner.offsetLeft + divInner.offsetWidth) % div1.offsetWidth;
	
	if(newTop > div1.offsetHeight - divInner.offsetHeight){
		newTop -= divInner.offsetHeight;
	}
	if(newLeft > div1.offsetWidth - divInner.offsetWidth){
		newLeft -= divInner.offsetWidth;
	}
	
	divInner.style.top = parseInt(newTop) + "px";
	divInner.style.left = parseInt(newLeft) + "px";
	setImage();
	debugInfo(random);
}



function no(){
	var divInfo = document.getElementById("say");
	divInfo.innerHTML = "What?!";
	var imageName = getImageName();
	imgCatching.src= "images/4.PNG";
}

function debugInfo(random){
	var divInfo = document.getElementById("divInfo");
	divInfo.innerHTML = "Random: " + random + "<br />" + 
					"div1" + "<br />" + 
					"offsetHeight: " + div1.offsetHeight + "<br />" + 
					"offsetWidth: " + div1.offsetWidth + "<br />" + 
					"divInner" + "<br />" + 
					"offsetTop: " + divInner.offsetTop + "<br />" + 
					"offsetLeft: " + divInner.offsetLeft + "<br />" + 
					"offsetHeight: " + divInner.offsetHeight + "<br />" + 
					"offsetWidth: " + divInner.offsetWidth + "<br />" + 
					"Image: "+getImageName();
}

//]]>
</script>
</head>
<body onload="init();">
	<div id="div1">
		<div id="divInner">
			<a id="aClick">
				<img id="imgCatching" src="images/3.png" width="50px" height="50px" onclick="no();" />
				<div id="divSay">click me!</div>	
			</a>
		</div>
	</div>
	<div id="divInfo"></div>
</body>
</html>